<!-- src/pages/AddPage/AddPage.vue -->

<template>
	<view>
		<cu-custom bgColor="white" :isBack="true" :isShadown="false">
			<block slot="backText"></block>
			<block slot="content">发动态</block>
		</cu-custom>
		<view class="form">
			<view class="form-item photo-wrap">
				<view class="previewImgWrap" v-if="image">
					<image class="previewImg" mode="aspectFill" :src="image" alt="">
				</view>
				<!-- <button class="button" @click="uploadImage">{{!isloading? '上传中' : '上传图片'}}</button> -->
				<view class="camera-w">
					<uni-icons class="right-icons" type="camera" size="50" color="gray" @click="uploadImage"></uni-icons>
				</view>
			</view>
			<view class="inp-wr">
				<!-- <text class="label">标题</text> -->
				<input class="input" v-model="title" @input="handleInput" placeholder="输入标题" />
				<text class="tips">{{num}}/20</text>
			</view>
			<view class="textarea-wr">
				<!-- <text class="label">内容</text> -->
				<textarea class="textarea" v-model="content" placeholder="分享你的运动生活,发布运动相关的图片您将会有机会上精选哦"></textarea>
			</view>
		</view>
		<view class="publish-btn">
			<button class="button" @click="publish">发布</button>
		</view>
	</view>
</template>

<script>
	import {
		pathToBase64,
		base64ToPath
	} from 'image-tools'
	export default {
		data() {
			return {
				title: '',
				content: '',
				image: '',
				isloading: true,
				num: 0
			}
		},
		methods: {
			uploadImage() {
				uni.chooseImage({
					count: 1,
					success: (res) => {
						const tempFilePaths = res.tempFilePaths;
						pathToBase64(res.tempFilePaths[0]).then(base64 => {
							this.image = base64
							console.log(this.image)
						})
					}
				});
			},
			publish() {
				if (this.title && this.content && this.image) {
					const newItem = {
						image: this.image,
						title: this.title,
						content: this.content
					};
					this.$store.dispatch('addItem', newItem).then(() => {
						uni.navigateBack();
						this.$store.dispatch('fetchList');
					});
				} else {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
				}
			},
			handleInput() {
				this.num = this.title.length;
			}
		}
	}
</script>

<style>
	@import url('/static/css/main.css');

	.form {
		padding: 20px;
		position: relative;
	}

	.form-item {
		margin-bottom: 20px;
	}

	.label {
		font-size: 12px;
		font-weight: bold;
		margin-bottom: 10px;
	}

	.input {
		width: 100%;
		padding: 10px;
		height: 40px;
		font-size: 12px;
		border-radius: 10px;
		/* background-color: rgba(200, 200, 200, 0.1); */
	}

	.textarea {
		width: 100%;
		padding: 10px;
		border-radius: 10px;
		height: 100px;
		font-size: 12px;
		/* background-color: rgba(200, 200, 200, 0.1); */
	}

	.button {
		width: 100%;
		padding: 10px;
		background-color: #4cd964;
		border: none;
		border-radius: 10px;
		color: white;
		font-size: 16px;
	}

	.publish-btn {
		position: absolute;
		bottom: 100px;
		left: 0;
		width: calc(100% - 40px);
		left: 50%;
		transform: translateX(-50%);
		display: flex;
		justify-content: center;
	}

	.previewImgWrap {
		overflow: hidden;
	}

	.previewImg {
		width: 100px;
		height: 100px;
	}
	.camera-w {
		width: 100px;
		height: 100px;
		background-color: rgba(200, 200, 200, 0.1);
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10px;
	}
	.photo-wrap  {
		display: flex;
		align-items: center;
	}
	.inp-wr{
		border-bottom: 1px solid rgba(200, 200, 200, 0.1);
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 12px;
	}
	.tips {
		color: lightgray;
	}
</style>